<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="2" :offset="11"><div class="grid-content bg-white"><h1>登&nbsp;&nbsp;录</h1></div></el-col>
    </el-row>
    <el-form :model="loginform" status-icon  label-width="100px" class="demo-loginform">
      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="loginform.userName"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7" :offset="8">
          <div class="grid-content bg-white">
            <el-form-item label="密码" prop="userPwd">
              <el-input type="password" v-model="loginform.userPwd" autocomplete="off"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="9">
          <div class="grid-content bg-white">
            <el-form-item>
              <el-button type="primary" @click="submitForm">登录</el-button>
              <el-button @click="resetForm('loginform')">重置</el-button>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
      return {
        loginform: {
          userName:'',
          userPwd: ''
        },
      };
    },
    methods: {
      submitForm() {
            //发送登录请求
            axios.post("http://localhost:8080/accounts/login",this.loginform)
                 .then((result)=>{
                    if(result.data.code===1){
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.$router.push('main');
                    }else if(result.data.msg=='login_error'){
                        this.$message.error('登录失败！用户名或密码错误');
                    }
                 })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style>

</style>